<template>
  <view>
    <YgSearch />
    <YgTabs @change="changeTab" />

    <view v-if="current === 0" class="list">
      <navigator
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        v-for="item in list"
        :key="item.goods_id"
        class="item"
      >
        <image class="left" :src="item.goods_small_logo"></image>
        <view class="right">
          <view class="title u-line-2">{{ item.goods_name }}</view>
          <view class="price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 如果是不同的排序其实只是发往后端api的参数不一样而已, 
    在这个项目里面, 没有这个功能, 只有一种默认的排序 -->
    <view v-if="current === 1" class="list">销量排序</view>
    <view v-if="current === 2" class="list">价格排序</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        list: [],
      };
    },
    onLoad(params) {
      // onLoad 生命周期默认可以接收到之前跳转进来的页面路径上带的参数
      console.log("页面跳转后获取到的参数", params);
      // 这个 cid 只需要挂载this上就好, 无需放入data,因为不会再模板中渲染
      // 如果在测试中, 这个页面作为第一页, 不是外面跳转进来, 就没有带这个参数, 可以用短路运算给个默认值
      this.cid = params.cid || "5";
      // 在this里面也定下页面翻页设定
      this.pagenum = 1;
      this.pagesize = 10;

      // 调用函数发请求
      this.loadPage();
    },
    async onPullDownRefresh() {
      // 这里是页面顶部往下拉的事件
      console.log("顶部下拉");
      // 重置所有数据, 然后重新加载
      this.pagenum = 1;
      this.list = [];
      // 注意加载数据这个函数是个async await 函数, 是个异步操作
      // async 函数本身会返回 promise , 如果想要等待这个函数内部的操作完毕
      // 可以 await 一下
      await this.loadPage();
      // 关闭下拉动画
      uni.stopPullDownRefresh();
    },
    onReachBottom() {
      // 这是页面滚动到底部的生命周期
      // 加载下一页之前, 检查一下是不是已经到底了?
      // 1. 可以判断获取到的数据比要求的长度短, 也已经到底
      // 2. 获取数据时,其实有个 total 值是后台数据总数, 如果我们拼接的数组已经是这个长度, 证明将所有后端数据都拿完了
      // 我们已经在 loadPage 函数中储存了后端拥有的数据总量 this.total
      // 判断当前页面已经加载的数据是否等于这个总数即可
      if (this.list.length >= this.total) {
        uni.showToast({
          icon: "none",
          title: "已经到底了",
        });
        return;
      }
      // 如果没有到底, 继续加载
      console.log("页面到底了");
      this.pagenum++;
      this.loadPage();
    },
    methods: {
      async loadPage() {
        const res = await uni.$u.http.get("/goods/search", {
          // 参数会拼接在url上
          params: {
            cid: this.cid,
            pagenum: this.pagenum,
            pagesize: this.pagesize,
          },
        });
        console.log("商品列表页获取数据", res);
        // 有可能是翻页, 不能直接覆盖, 需要拼接
        this.list = [...this.list, ...res.goods];
        // 记录后端数据总条数, 方便下次翻页时判断是否到底
        this.total = res.total;
      },
      changeTab(index) {
        this.current = index;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .list {
    .item {
      display: flex;
      padding: 9rpx 41rpx;
      .left {
        width: 191rpx;
        height: 191rpx;
      }
      .right {
        flex: 1;
        font-size: 24rpx;
        padding: 10rpx 0 10rpx 29rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          color: #434343;
        }
        .price {
          color: #ea4350;
        }
      }
    }
  }
</style>